<template>
  <div class="tabdiv">
    <div
      v-for="(item,index) in tabs"
      class="itemtab"
      :class="`tabitem-${index}`"
      :style="bgColorArray[index].tabBgColor"
      @click="onTabClicked(index)"
      :key="index"
    >
      <i class="dot" />
      <span class="text">{{item.title}}</span>
      <div v-if="item.closable" class="iconwrap">
        <i
          class="el-icon-close close"
          :style="bgColorArray[index].tabCloseColor"
          @mouseover="onCloseHover(index)"
          @mouseout="onCloseNormal(index)"
          @click.stop="onCloseClicked(index)"
        />
      </div>
    </div>
  </div>
</template>

<script>
let __curChosedTabIndex = 0;
export default {
  props: {
    tabs: Array
  },
  data() {
    return {
      bgColorArray: []
    };
  },
  created() {
    for (var item in this.tabs) {
      var itemBgCss = {
        tabBgColor: { backgroundColor: "white" },
        tabCloseColor: { color: "gray" }
      };
      this.bgColorArray.push(itemBgCss);
    }
    this.onTabClicked(__curChosedTabIndex);
  },
  watch: {
    tabs: function(newTab, oldTab) {}
  },
  methods: {
    onTabClicked(index) {
      //   const node = document.querySelector(`.tabitem-${index}`);
      this.$router.push(this.tabs[index].url);
// alert("onTabClicked index:"+index);
// alert("this.__curChosedTabIndex index:"+__curChosedTabIndex);
      if (
        __curChosedTabIndex >= 0 &&
        __curChosedTabIndex < this.bgColorArray.length
      ) {
        var lastTabItemValue = this.bgColorArray[__curChosedTabIndex];
        lastTabItemValue.tabBgColor = { backgroundColor: "white" };
        console.info("oriItemValue is:" + lastTabItemValue);
        this.$set(this.bgColorArray, __curChosedTabIndex, lastTabItemValue);
      }

      var oriItemValue = this.bgColorArray[index];
      oriItemValue.tabBgColor = { backgroundColor: "rgb(56, 174, 113)" };
      console.info("oriItemValue is:" + oriItemValue);
      this.$set(this.bgColorArray, index, oriItemValue);
      __curChosedTabIndex = index;
    },
    onCloseHover(index) {
      // alert("123"+index);
      var oriItemValue = this.bgColorArray[index];
      oriItemValue.tabCloseColor = { color: "white" };
      console.info("oriItemValue is:" + oriItemValue);
      this.$set(this.bgColorArray, index, oriItemValue);
    },
    onCloseNormal(index) {
      var oriItemValue = this.bgColorArray[index];
      oriItemValue.tabCloseColor = { color: "gray" };
      console.info("oriItemValue is:" + oriItemValue);
      this.$set(this.bgColorArray, index, oriItemValue);
    },
    onCloseClicked(index) {
      this.tabs.splice(index, 1);
      this.bgColorArray.splice(index, 1);

      if (__curChosedTabIndex === index) {
        this.onTabClicked(this.tabs.length - 1);
      }
    },
    jump2Tab(tabData) {
      var tabIndex = tabData.index;
      var tabOrderIndex = this.getTabOrderByIndex(tabIndex);
      var toBeShowTabOrder;
      if (tabOrderIndex < 0) {
        //说明这个tab还没有在标签栏打开需要新建一个标签打开

        this.tabs.push(tabData);
        var itemBgCss = {
          tabBgColor: { backgroundColor: "white" },
          tabCloseColor: { color: "gray" }
        };
        this.bgColorArray.push(itemBgCss);
        toBeShowTabOrder = this.tabs.length-1; 
      }else{
          //说明这个标签已经打开，只需要跳转到这个标签即可
        
          toBeShowTabOrder = tabOrderIndex;
      }

      this.onTabClicked(toBeShowTabOrder);
    },
    getTabOrderByIndex(dataIndex) {
      for (let i = 0; i < this.tabs.length; i++) {
        let itemData = this.tabs[i];
        if (dataIndex === itemData.index) {
          return i;
        }
      }
      return -1;
    }
  }
};
</script>

<style lang="scss" scoped>
.tabdiv {
  width: 100%;
  height: 30px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  display: flex;
  align-items: center;
  .itemtab {
    cursor: pointer;
    height: 24px;

    border: 1px solid #eee;

    margin-left: 5px;
    padding-left: 5px;
    padding-right: 5px;
    display: flex;
    align-items: center;
    font-size: 12px;
    color: rgb(94, 100, 112);
    .dot {
      width: 8px;
      height: 8px;
      border-radius: 30px;
      background-color: white;
    }
    .text {
      margin-left: 5px;
      margin-right: 5px;
    }
    .iconwrap {
      font-size: 10px;
      width: 15px;
      height: 15px;
    }
    .iconwrap:hover {
      border-radius: 30px;
      background-color: gray;
    }
  }
}
</style>